<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机图片显示</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <style type="text/css">

    </style>
</head>
<body>

<div id="randomImage"></div>
<input type="button"  style="size: 120px" class="btnrandom" value="随机图片">
</body>
<script type="text/javascript">
    $(function () {
        getRandomImage();
        $(".btnrandom").click(function () {
            getRandomImage();
        });

    });

    function getRandomImage() {
        scrollTo(0,0);
        $.get({
            url:"getImage",
            data:{
                action:"getRandomImage"
            },
            success:function (list) {
                var html="";
                for (var image of list) {
                    html+=" <button class=\"btn-Delete\"/>"
                    if (image.ratio <= 0.8) {
                        html +=" <img class='images' width='1280' align='center' src=\"/telegram/" + image.name + "\"></img>\n" +
                            " <p>&nbsp;</p>";
                    } else {
                        html += " <img class='images' width='903' align='center' src=\"/telegram/" + image.name + "\"></img>\n" +
                            "    <p>&nbsp;</p>";
                    }
                }
                $("#randomImage").html(html);
                $("img.images").click(function () {
                    getRandomImage();
                });
            }
        });
    }

</script>

</html>